<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站轮播展示</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #4F46E5;
            --primary-light: #EEF2FF;
            --secondary: #EC4899;
            --dark: #1E293B;
            --light: #F8FAFC;
            --gray: #64748B;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            --radius: 12px;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            padding-top: 3rem;
            padding-bottom: 4rem;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 3rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        
        .page-title {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--dark);
        }
        
        .page-subtitle {
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto;
        }
        
        .carousel-section {
            margin-bottom: 4rem;
            padding: 1.5rem;
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .section-title i {
            color: var(--primary);
        }
        
        .section-desc {
            color: var(--gray);
            margin-bottom: 2rem;
            font-size: 0.95rem;
        }
        
        /* 通用轮播样式 */
        .custom-carousel {
            border-radius: var(--radius);
            overflow: hidden;
            position: relative;
        }
        
        /* 焦点图轮播 */
        .hero-carousel .carousel-item {
            height: 500px;
            position: relative;
        }
        
        .hero-carousel .carousel-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .hero-carousel .carousel-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 2.5rem;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            text-align: left;
        }
        
        .hero-carousel .carousel-title {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .hero-carousel .carousel-text {
            font-size: 1rem;
            max-width: 700px;
            margin-bottom: 1rem;
        }
        
        /* 用户推荐轮播 */
        .users-carousel {
            padding: 1rem 0;
        }
        
        .users-carousel .carousel-inner {
            padding: 1rem 0;
        }
        
        .users-carousel .carousel-item {
            padding: 0 15px;
        }
        
        .user-card {
            text-align: center;
            padding: 1.5rem;
            background-color: white;
            border-radius: var(--radius);
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: transform 0.3s ease;
        }
        
        .user-card:hover {
            transform: translateY(-5px);
        }
        
        .user-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 1rem;
            border: 3px solid var(--primary-light);
        }
        
        .user-name {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .user-bio {
            color: var(--gray);
            font-size: 0.85rem;
            margin-bottom: 1rem;
            min-height: 40px;
        }
        
        .user-followers {
            font-size: 0.8rem;
            color: var(--gray);
            margin-bottom: 1rem;
        }
        
        /* 帖子轮播 */
        .posts-carousel .carousel-item {
            height: 400px;
        }
        
        .post-card {
            height: 100%;
            display: flex;
            flex-direction: column;
            background-color: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: 0 3px 15px rgba(0,0,0,0.07);
        }
        
        .post-image {
            height: 200px;
            width: 100%;
            object-fit: cover;
        }
        
        .post-content {
            padding: 1.25rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .post-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .post-time {
            font-size: 0.75rem;
            color: var(--gray);
        }
        
        .post-title {
            font-weight: 600;
            margin-bottom: 0.75rem;
            flex-grow: 1;
        }
        
        .post-stats {
            display: flex;
            gap: 1.5rem;
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .post-stat {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        /* 产品/活动轮播 */
        .products-carousel .carousel-item {
            padding: 0 10px;
        }
        
        .product-card {
            border-radius: var(--radius);
            overflow: hidden;
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .product-image {
            height: 180px;
            width: 100%;
            object-fit: cover;
        }
        
        .product-info {
            padding: 1.25rem;
        }
        
        .product-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .product-desc {
            color: var(--gray);
            font-size: 0.85rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .product-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .product-date {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        /* 轮播控制按钮样式 */
        .carousel-control-prev,
        .carousel-control-next {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.9);
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            top: 50%;
            transform: translateY(-50%);
            opacity: 0.7;
            transition: all 0.3s ease;
        }
        
        .carousel-control-prev:hover,
        .carousel-control-next:hover {
            opacity: 1;
            transform: translateY(-50%) scale(1.1);
        }
        
        .carousel-control-prev {
            left: 10px;
        }
        
        .carousel-control-next {
            right: 10px;
        }
        
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            width: 18px;
            height: 18px;
            background-size: 100%;
        }
        
        /* 指示器样式 */
        .carousel-indicators {
            bottom: 15px;
        }
        
        .carousel-indicators [data-bs-target] {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: white;
            opacity: 0.6;
            margin: 0 4px;
        }
        
        .carousel-indicators .active {
            opacity: 1;
            width: 10px;
            height: 10px;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .hero-carousel .carousel-item {
                height: 400px;
            }
            
            .posts-carousel .carousel-item {
                height: 380px;
            }
        }
        
        @media (max-width: 768px) {
            .page-title {
                font-size: 1.85rem;
            }
            
            .hero-carousel .carousel-item {
                height: 320px;
            }
            
            .hero-carousel .carousel-caption {
                padding: 1.5rem;
            }
            
            .hero-carousel .carousel-title {
                font-size: 1.5rem;
            }
            
            .posts-carousel .carousel-item {
                height: 350px;
            }
            
            .product-image {
                height: 150px;
            }
        }
        
        @media (max-width: 576px) {
            .hero-carousel .carousel-item {
                height: 260px;
            }
            
            .hero-carousel .carousel-text {
                display: none;
            }
            
            .posts-carousel .carousel-item {
                height: 320px;
            }
            
            .post-image {
                height: 160px;
            }
            
            .section-title {
                font-size: 1.25rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">社交网站轮播展示</h1>
            <p class="page-subtitle">多种风格的轮播组件，适用于不同内容的展示需求</p>
        </div>
        
        <!-- 焦点图轮播 -->
        <div class="carousel-section">
            <h2 class="section-title"><i class="fas fa-fire"></i> 焦点内容轮播</h2>
            <p class="section-desc">展示重要公告、热门活动或精选内容，吸引用户注意力</p>
            
            <div id="heroCarousel" class="carousel slide hero-carousel custom-carousel" data-bs-ride="carousel">
                <!-- 指示器 -->
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                
                <!-- 轮播内容 -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="https://picsum.photos/seed/hero1/1200/500" alt="年度社交峰会现场" class="carousel-img">
                        <div class="carousel-caption d-none d-md-block">
                            <h3 class="carousel-title">2023年度社交峰会圆满结束</h3>
                            <p class="carousel-text">超过5000名用户参与，探讨社交网络的未来发展与创新方向，共同见证平台新功能发布。</p>
                            <button class="btn btn-primary">查看详情</button>
                        </div>
                    </div>
                    
                    <div class="carousel-item">
                        <img src="https://picsum.photos/seed/hero2/1200/500" alt="社区公益活动" class="carousel-img">
                        <div class="carousel-caption d-none d-md-block">
                            <h3 class="carousel-title">社区公益活动月正式启动</h3>
                            <p class="carousel-text">参与社区公益活动，累积公益时长可兑换专属勋章和平台特权，让我们一起传递正能量。</p>
                            <button class="btn btn-primary">立即参与</button>
                        </div>
                    </div>
                    
                    <div class="carousel-item">
                        <img src="https://picsum.photos/seed/hero3/1200/500" alt="新功能上线" class="carousel-img">
                        <div class="carousel-caption d-none d-md-block">
                            <h3 class="carousel-title">全新社交互动功能上线</h3>
                            <p class="carousel-text">引入实时互动、内容共创等新功能，让你的社交体验更加丰富多元，连接更紧密。</p>
                            <button class="btn btn-primary">了解新功能</button>
                        </div>
                    </div>
                </div>
                
                <!-- 控制按钮 -->
                <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
        
        <!-- 用户推荐轮播 -->
        <div class="carousel-section">
            <h2 class="section-title"><i class="fas fa-users"></i> 推荐关注用户轮播</h2>
            <p class="section-desc">横向滚动展示推荐关注的用户，帮助用户发现更多志同道合的朋友</p>
            
            <div id="usersCarousel" class="carousel slide users-carousel custom-carousel" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row">
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                <div class="user-card">
                                    <img src="https://picsum.photos/seed/user1/200/200" alt="用户头像" class="user-avatar">
                                    <h3 class="user-name">张明</h3>
                                    <p class="user-bio">摄影爱好者，分享旅行中的美好瞬间</p>
                                    <p class="user-followers">1.2k 粉丝</p>
                                    <button class="btn btn-primary btn-sm">关注</button>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                <div class="user-card">
                                    <img src="https://picsum.photos/seed/user2/200/200" alt="用户头像" class="user-avatar">
                                    <h3 class="user-name">李华</h3>
                                    <p class="user-bio">前端开发者，分享技术心得</p>
                                    <p class="user-followers">3.5k 粉丝</p>
                                    <button class="btn btn-primary btn-sm">关注</button>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                <div class="user-card">
                                    <img src="https://picsum.photos/seed/user3/200/200" alt="用户头像" class="user-avatar">
                                    <h3 class="user-name">王芳</h3>
                                    <p class="user-bio">美食博主，分享家常菜食谱</p>
                                    <p class="user-followers">5.8k 粉丝</p>
                                    <button class="btn btn-primary btn-sm">关注</button>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                <div class="user-card">
                                    <img src="https://picsum.photos/seed/user4/200/200" alt="用户头像" class="user-avatar">
                                    <h3 class="user-name">赵强</h3>
                                    <p class="user-bio">健身教练，分享健身技巧</p>
                                    <p class="user-followers">2.1k 粉丝</p>
                                    <button class="btn btn-primary btn-sm">关注</button>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                <div class="user-card">
                                    <img src="https://picsum.photos/seed/user5/200/200" alt="用户头像" class="user-avatar">
                                    <h3 class="user-name">陈静</h3>
                                    <p class="user-bio">读书达人，分享阅读感悟</p>
                                    <p class="user-followers">890 粉丝</p>
                                    <button class="btn btn-primary btn-sm">关注</button>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                <div class="user-card">
                                    <img src="https://picsum.photos/seed/user6/200/200" alt="用户头像" class="user-avatar">
                                    <h3 class="user-name">刘强</h3>
                                    <p class="user-bio">独立音乐人，分享原创作品</p>
                                    <p class="user-followers">4.3k 粉丝</p>
                                    <button class="btn btn-primary btn-sm">关注</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                <div class="user-card">
                                    <img src="https://picsum.photos/seed/user7/200/200" alt="用户头像" class="user-avatar">
                                    <h3 class="user-name">林小雨</h3>
                                    <p class="user-bio">插画师，分享绘画作品</p>
                                    <p class="user-followers">6.7k 粉丝</p>
                                    <button class="btn btn-primary btn-sm">关注</button>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                <div class="user-card">
                                    <img src="https://picsum.photos/seed/user8/200/200" alt="用户头像" class="user-avatar">
                                    <h3 class="user-name">郑伟</h3>
                                    <p class="user-bio">旅行博主，探索世界各地</p>
                                    <p class="user-followers">8.2k 粉丝</p>
                                    <button class="btn btn-primary btn-sm">关注</button>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                <div class="user-card">
                                    <img src="https://picsum.photos/seed/user9/200/200" alt="用户头像" class="user-avatar">
                                    <h3 class="user-name">吴敏</h3>
                                    <p class="user-bio">瑜伽教练，分享健康生活</p>
                                    <p class="user-followers">3.1k 粉丝</p>
                                    <button class="btn btn-primary btn-sm">关注</button>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                <div class="user-card">
                                    <img src="https://picsum.photos/seed/user10/200/200" alt="用户头像" class="user-avatar">
                                    <h3 class="user-name">孙亮</h3>
                                    <p class="user-bio">游戏开发者，分享开发经验</p>
                                    <p class="user-followers">2.5k 粉丝</p>
                                    <button class="btn btn-primary btn-sm">关注</button>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                <div class="user-card">
                                    <img src="https://picsum.photos/seed/user11/200/200" alt="用户头像" class="user-avatar">
                                    <h3 class="user-name">周婷</h3>
                                    <p class="user-bio">时尚博主，分享穿搭技巧</p>
                                    <p class="user-followers">9.4k 粉丝</p>
                                    <button class="btn btn-primary btn-sm">关注</button>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                <div class="user-card">
                                    <img src="https://picsum.photos/seed/user12/200/200" alt="用户头像" class="user-avatar">
                                    <h3 class="user-name">朱明</h3>
                                    <p class="user-bio">电影爱好者，分享影评</p>
                                    <p class="user-followers">1.8k 粉丝</p>
                                    <button class="btn btn-primary btn-sm">关注</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 控制按钮 -->
                <button class="carousel-control-prev" type="button" data-bs-target="#usersCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#usersCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
        
        <!-- 热门帖子轮播 -->
        <div class="carousel-section">
            <h2 class="section-title"><i class="fas fa-comment-alt"></i> 热门帖子轮播</h2>
            <p class="section-desc">展示平台内的热门帖子和精选内容，提高优质内容的曝光率</p>
            
            <div id="postsCarousel" class="carousel slide posts-carousel custom-carousel" data-bs-ride="carousel">
                <!-- 指示器 -->
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#postsCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#postsCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#postsCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                
                <!-- 轮播内容 -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="post-card">
                                    <img src="https://picsum.photos/seed/post1/600/400" alt="旅行照片" class="post-image">
                                    <div class="post-content">
                                        <div class="post-author">
                                            <img src="https://picsum.photos/seed/author1/100/100" alt="作者头像" class="author-avatar">
                                            <div>
                                                <div class="author-name">旅行者小明</div>
                                                <div class="post-time">3天前</div>
                                            </div>
                                        </div>
                                        <h3 class="post-title">分享我的西藏自驾游攻略，这些绝美景点不容错过</h3>
                                        <div class="post-stats">
                                            <div class="post-stat"><i class="far fa-heart"></i> 2.4k</div>
                                            <div class="post-stat"><i class="far fa-comment"></i> 356</div>
                                            <div class="post-stat"><i class="far fa-share-square"></i> 128</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="post-card">
                                    <img src="https://picsum.photos/seed/post2/600/400" alt="美食照片" class="post-image">
                                    <div class="post-content">
                                        <div class="post-author">
                                            <img src="https://picsum.photos/seed/author2/100/100" alt="作者头像" class="author-avatar">
                                            <div>
                                                <div class="author-name">美食家小雨</div>
                                                <div class="post-time">1周前</div>
                                            </div>
                                        </div>
                                        <h3 class="post-title">在家也能做出米其林级别的甜点，附详细步骤和配方</h3>
                                        <div class="post-stats">
                                            <div class="post-stat"><i class="far fa-heart"></i> 1.8k</div>
                                            <div class="post-stat"><i class="far fa-comment"></i> 215</div>
                                            <div class="post-stat"><i class="far fa-share-square"></i> 97</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="post-card">
                                    <img src="https://picsum.photos/seed/post3/600/400" alt="科技产品照片" class="post-image">
                                    <div class="post-content">
                                        <div class="post-author">
                                            <img src="https://picsum.photos/seed/author3/100/100" alt="作者头像" class="author-avatar">
                                            <div>
                                                <div class="author-name">科技达人</div>
                                                <div class="post-time">2天前</div>
                                            </div>
                                        </div>
                                        <h3 class="post-title">最新款折叠屏手机深度评测，优缺点全解析</h3>
                                        <div class="post-stats">
                                            <div class="post-stat"><i class="far fa-heart"></i> 3.1k</div>
                                            <div class="post-stat"><i class="far fa-comment"></i> 427</div>
                                            <div class="post-stat"><i class="far fa-share-square"></i> 203</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="post-card">
                                    <img src="https://picsum.photos/seed/post4/600/400" alt="健身照片" class="post-image">
                                    <div class="post-content">
                                        <div class="post-author">
                                            <img src="https://picsum.photos/seed/author4/100/100" alt="作者头像" class="author-avatar">
                                            <div>
                                                <div class="author-name">健身教练阿强</div>
                                                <div class="post-time">5天前</div>
                                            </div>
                                        </div>
                                        <h3 class="post-title">30天居家健身计划，每天30分钟，轻松练出好身材</h3>
                                        <div class="post-stats">
                                            <div class="post-stat"><i class="far fa-heart"></i> 2.7k</div>
                                            <div class="post-stat"><i class="far fa-comment"></i> 189</div>
                                            <div class="post-stat"><i class="far fa-share-square"></i> 312</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="post-card">
                                    <img src="https://picsum.photos/seed/post5/600/400" alt="读书分享" class="post-image">
                                    <div class="post-content">
                                        <div class="post-author">
                                            <img src="https://picsum.photos/seed/author5/100/100" alt="作者头像" class="author-avatar">
                                            <div>
                                                <div class="author-name">书虫阅读</div>
                                                <div class="post-time">2周前</div>
                                            </div>
                                        </div>
                                        <h3 class="post-title">2023年必读书单推荐，这10本书改变了我的思维方式</h3>
                                        <div class="post-stats">
                                            <div class="post-stat"><i class="far fa-heart"></i> 1.5k</div>
                                            <div class="post-stat"><i class="far fa-comment"></i> 276</div>
                                            <div class="post-stat"><i class="far fa-share-square"></i> 156</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="post-card">
                                    <img src="https://picsum.photos/seed/post6/600/400" alt="摄影作品" class="post-image">
                                    <div class="post-content">
                                        <div class="post-author">
                                            <img src="https://picsum.photos/seed/author6/100/100" alt="作者头像" class="author-avatar">
                                            <div>
                                                <div class="author-name">光影摄影</div>
                                                <div class="post-time">4天前</div>
                                            </div>
                                        </div>
                                        <h3 class="post-title">新手必学的10个摄影技巧，手机也能拍出专业级照片</h3>
                                        <div class="post-stats">
                                            <div class="post-stat"><i class="far fa-heart"></i> 2.2k</div>
                                            <div class="post-stat"><i class="far fa-comment"></i> 143</div>
                                            <div class="post-stat"><i class="far fa-share-square"></i> 98</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 控制按钮 -->
                <button class="carousel-control-prev" type="button" data-bs-target="#postsCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#postsCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
        
        <!-- 活动/产品轮播 -->
        <div class="carousel-section">
            <h2 class="section-title"><i class="fas fa-calendar-alt"></i> 活动与产品轮播</h2>
            <p class="section-desc">展示即将举行的社区活动或平台推荐的产品服务</p>
            
            <div id="productsCarousel" class="carousel slide products-carousel custom-carousel" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row">
                            <div class="col-6 col-sm-4 col-md-3">
                                <div class="product-card">
                                    <img src="https://picsum.photos/seed/event1/400/300" alt="摄影大赛" class="product-image">
                                    <div class="product-info">
                                        <h3 class="product-title">社区摄影大赛</h3>
                                        <p class="product-desc">分享你眼中的美好瞬间，赢取专业摄影器材</p>
                                        <div class="product-meta">
                                            <span class="product-date">5月15日截止</span>
                                            <button class="btn btn-primary btn-sm">了解详情</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3">
                                <div class="product-card">
                                    <img src="https://picsum.photos/seed/event2/400/300" alt="线上讲座" class="product-image">
                                    <div class="product-info">
                                        <h3 class="product-title">创业经验分享会</h3>
                                        <p class="product-desc">成功创业者分享经验，解答你的创业疑惑</p>
                                        <div class="product-meta">
                                            <span class="product-date">5月20日 19:00</span>
                                            <button class="btn btn-primary btn-sm">预约参加</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3">
                                <div class="product-card">
                                    <img src="https://picsum.photos/seed/event3/400/300" alt="线下聚会" class="product-image">
                                    <div class="product-info">
                                        <h3 class="product-title">城市线下交流会</h3>
                                        <p class="product-desc">同城用户面对面交流，拓展你的社交圈</p>
                                        <div class="product-meta">
                                            <span class="product-date">6月5日 14:00</span>
                                            <button class="btn btn-primary btn-sm">报名参加</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3">
                                <div class="product-card">
                                    <img src="https://picsum.photos/seed/event4/400/300" alt="会员福利" class="product-image">
                                    <div class="product-info">
                                        <h3 class="product-title">会员专属福利</h3>
                                        <p class="product-desc">月度会员专享礼包，限量领取</p>
                                        <div class="product-meta">
                                            <span class="product-date">5月31日截止</span>
                                            <button class="btn btn-primary btn-sm">立即领取</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-6 col-sm-4 col-md-3">
                                <div class="product-card">
                                    <img src="https://picsum.photos/seed/event5/400/300" alt="公益活动" class="product-image">
                                    <div class="product-info">
                                        <h3 class="product-title">社区公益日</h3>
                                        <p class="product-desc">一起参与环保公益活动，传递正能量</p>
                                        <div class="product-meta">
                                            <span class="product-date">6月10日 9:00</span>
                                            <button class="btn btn-primary btn-sm">报名参加</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3">
                                <div class="product-card">
                                    <img src="https://picsum.photos/seed/event6/400/300" alt="线上课程" class="product-image">
                                    <div class="product-info">
                                        <h3 class="product-title">设计入门课程</h3>
                                        <p class="product-desc">零基础学习UI设计，适合新手入门</p>
                                        <div class="product-meta">
                                            <span class="product-date">6月1日开课</span>
                                            <button class="btn btn-primary btn-sm">立即报名</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3">
                                <div class="product-card">
                                    <img src="https://picsum.photos/seed/event7/400/300" alt="新品发布" class="product-image">
                                    <div class="product-info">
                                        <h3 class="product-title">平台新功能体验</h3>
                                        <p class="product-desc">抢先体验新功能，反馈送会员</p>
                                        <div class="product-meta">
                                            <span class="product-date">长期有效</span>
                                            <button class="btn btn-primary btn-sm">申请体验</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-sm-4 col-md-3">
                                <div class="product-card">
                                    <img src="https://picsum.photos/seed/event8/400/300" alt="主题活动" class="product-image">
                                    <div class="product-info">
                                        <h3 class="product-title">夏日主题摄影</h3>
                                        <p class="product-desc">以夏日为主题的摄影比赛，赢取奖品</p>
                                        <div class="product-meta">
                                            <span class="product-date">6月30日截止</span>
                                            <button class="btn btn-primary btn-sm">了解详情</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 控制按钮 -->
                <button class="carousel-control-prev" type="button" data-bs-target="#productsCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#productsCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化所有轮播
            const carousels = document.querySelectorAll('.carousel');
            carousels.forEach(carousel => {
                new bootstrap.Carousel(carousel, {
                    interval: 5000, // 5秒自动切换
                    wrap: true, // 循环播放
                    keyboard: true // 支持键盘控制
                });
            });
            
            // 为卡片添加悬停动画
            const cards = document.querySelectorAll('.user-card, .post-card, .product-card');
            cards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transition = 'all 0.3s ease';
                });
            });
            
            // 关注按钮交互
            const followButtons = document.querySelectorAll('.user-card .btn');
            followButtons.forEach(button => {
                button.addEventListener('click', function() {
                    if (this.textContent.trim() === '关注') {
                        this.textContent = '已关注';
                        this.classList.remove('btn-primary');
                        this.classList.add('btn-success');
                    } else {
                        this.textContent = '关注';
                        this.classList.remove('btn-success');
                        this.classList.add('btn-primary');
                    }
                });
            });
        });
    </script>
</body>
</html>
    
